<template>
  <div class="container">
    <!-- 二手 -->
    <div style="display: flex; background: #fff">
      <img
        :src="avter"
        alt=""
        style="
          border-radius: 25px;
          width: 30px;
          height: 30px;
          margin: 10px 5% 0px 5%;
        "
      />
      <p>{{ positionName }}</p>
    </div>
    <div
      style="
        height: auto;
        width: 100%;
        padding: 0px 5% 5px 5%;
        background: #fff;
        color: #8d8e8eee;
        font-size: 12px;
      "
      v-html="tiw"
    ></div>
    <div
      style="position: relative"
      :style="{
        background: `#FF9C00`,
      }"
    >
      <!-- <div style="position: absolute; top: 19%; left: 3.8%; z-index: 11">
        <van-icon name="location" color="black" />
      </div> -->

      <div class="navclas" style="height: 50px" v-if="false">
        <div
          class=""
          style="
            border-radius: 27px;
            width: 100%;
            padding: 0 10px;
            height: 29px;
            background: #fff;
          "
        >
          <div
            class="van-field__left-icon"
            style="padding-top: 5px; display: flex"
          >
            <i
              class="van-icon van-icon-search"
              style="
                height: 1.1rem;
                color: #686869;
                padding-top: 1%;
                padding-right: 2px;
              "
            ></i>
            <input
              v-model="filter_name"
              type="search"
              placeholder="请输入产品名称"
              ref="inpt"
              style="font-size: 14px"
              class="van-field__control"
              @search="filname"
            />
          </div>
        </div>
      </div>

      <div style="margin-top: 0px">
        <van-row type="flex" justify="space-around" align="center"> </van-row>
        <van-row
          class="menu-container"
          style="justify-content: space-between; padding: 10px 10px"
        >
          <van-col span="8" style="">
            <van-dropdown-menu
              class="addressVa"
              style=""
              active-color="#EE3F00"
            >
              <van-dropdown-item
                :title="address"
                class="select_area"
                ref="area_item"
              >
                <van-area
                  columns-num="2"
                  :area-list="areaList"
                  @confirm="addConfirm"
                  @cancel="hideAreaItem"
                  :value="area_code"
                />
              </van-dropdown-item>
            </van-dropdown-menu>
          </van-col>
          <van-col span="8" style="border-radius: 25px; margin: 0 10px">
            <van-dropdown-menu
              class="addressVa"
              style="margin: auto"
              active-color="#EE3F00"
            >
              <van-dropdown-item
                v-model="in_class"
                :options="classoptions"
                @change="changeItem"
              />
            </van-dropdown-menu>
          </van-col>
          <!-- <van-col
            span="8"
            style="border-radius: 25px; margin: 0px 14.5px 0 15px"
          >
            <van-dropdown-menu
              style="border-radius: 25px; background: #ffae4e"
              active-color="#EE3F00"
            >
              <van-dropdown-item
                style="border-radius: 25px"
                v-model="chosed_level"
                :options="leveloptions"
                @change="changeItem"
              />
            </van-dropdown-menu>
          </van-col> -->
          <van-col
            span="7"
            class="is-active"
            style="
              border-radius: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
            "
            @click="publish('/info/used-publish/-1')"
          >
            <span style="font-size: 15px; color: white; padding-bottom: 2.8px"
              >点击发布</span
            >
          </van-col>
        </van-row>
      </div>
    </div>

    <!-- <div
      style="height: auto; width: 100%; padding: 10px 5% 0 5%; background: #fff"
      v-html="tiw"
    ></div> -->

    <!-- 标签选项 -->
    <!-- <div style="background: #fff">
      <ul style="display: flex; width: 95%; margin: auto">
        <li style="width: 17%">喷涂设备</li>
        <li style="width: 83%">
          <ul style="display: flex; width: 100%; flex-wrap: wrap">
            <li style="width: 25%; padding: 0 3px; font-size: 0.75rem">
              腻子喷涂机
            </li>
            <li style="width: 25%; padding: 0 3px; font-size: 0.75rem">
              防水喷涂机
            </li>
            <li style="width: 25%; padding: 0 3px; font-size: 0.75rem">
              防火喷涂机
            </li>
            <li style="width: 25%; padding: 0 3px; font-size: 0.75rem">
              防腐喷涂机
            </li>
            <li
              style="
                width: 25%;
                padding: 0 3px;
                font-size: 0.75rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              石膏砂浆喷涂机
            </li>
            <li style="width: 25%; padding: 0 3px; font-size: 0.75rem">
              划线喷涂机
            </li>
            <li
              style="
                width: 25%;
                padding: 0 3px;
                font-size: 0.75rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              真石漆喷涂机
            </li>
            <li style="width: 25%; padding: 0 3px; font-size: 0.75rem">
              喷料喷涂机
            </li>
          </ul>
        </li>
      </ul>
    </div> -->

    <div class="tishi">
      <div class="ticonent" style="font-size: 11px">
        喷喷涂涂网提示：喷喷涂涂网为用户提供信息发布的平台，
        产品二手转让信息由用户自行发布，联系时仍需注意识别信息真假。
      </div>
    </div>
    <!-- 路径跳转 -->
    <div
      @click="lualy()"
      v-show="luay"
      style="
        display: flex;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        z-index: 11111;
        align-items: center;
      "
    >
      <ul
        style="
          width: 90%;
          margin: auto;
          background: #ffffff;
          border-radius: 4px;
        "
      >
        <li
          style="
            display: flex;
            border-bottom: 1px solid #eaeaea;
            width: 80%;
            margin: auto;
          "
          @click="toFa(2)"
        >
          <p
            style="
              width: 80%;
              text-align: center;
              padding-right: 61px;
              color: rgb(48, 152, 89);
            "
          >
            二手发布
          </p>
          <p style="width: 20%; color: #f25c24">Go</p>
        </li>
        <li
          style="
            display: flex;
            border-bottom: 1px solid #eaeaea;
            width: 80%;
            margin: auto;
          "
          @click="toFa(1)"
        >
          <p
            style="
              width: 80%;
              text-align: center;
              padding-right: 61px;
              color: rgb(29, 90, 230);
            "
          >
            租赁发布
          </p>
          <p style="width: 20%; color: #f25c24">Go</p>
        </li>
        <li style="width: 100%" @click="lualy()">
          <p
            style="
              width: 80%;
              text-align: center;
              margin: auto;
              padding: 10px 0;
            "
          >
            取消
          </p>
        </li>
      </ul>
    </div>

    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="看看其他地区的产品二手转让信息"
        @load="onLoad"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          :title="item"
          style="background-color: white; margin-top: 5px"
        >
          <van-row
            style="padding-top: 15px"
            @click="itemClick(item.id, item.renStauts)"
          >
            <van-col style="position: relative">
              <img
                :src="getSrc(item, index)"
                style="object-fit: cover"
                width="100px"
                height="100px"
              />
              <!-- 已完成 -->
              <img
                v-if="item.finished"
                :src="item.sellOut == true ? sellOutPng : finishPng"
                style="
                  position: absolute;
                  z-index: 1;
                  width: 100%;
                  left: 50%;
                  top: 50%;
                  margin: auto;
                  transform: translate(-50%, -50%);
                "
              />
            </van-col>
            <van-col
              style="
                width: calc(100% - 100px);
                height: 100px;
                padding-left: 10px;
                display: flex;
                flex-direction: column;
                position: relative;
              "
            >
              <!-- 认证 -->
              <!-- <img
                :src="logo_certificate"
                width="40px"
                style="position: absolute; right: -10px; top: 0px; z-index: 1"
              /> -->
              <div style="flex: 1; display: flex">
                <p
                  style="
                    display: inline-block;
                    color: white;
                    width: auto;
                    height: 20px;
                    padding: 2px 3px;
                    align-items: center;
                    font-size: 12px;
                    text-align: center;
                    border-radius: 4px;
                    margin-top: 5px;
                    background: rgb(128, 157, 225);
                  "
                  :style="{
                    background:
                      item.userType == '平台'
                        ? '#86d1a4'
                        : item.userType == '门店'
                        ? '#809de1'
                        : item.userType == '个人'
                        ? '#f4a97c'
                        : null,
                  }"
                >
                  {{ item.userType == undefined ? '待审' : item.userType }}
                </p>
                <van-cell
                  style="margin-left: 10px"
                  :title="item.title"
                  label-class="item"
                  title-class="title"
                  :label="item.detail"
                ></van-cell>
              </div>
              <div style="width: 100%">
                <van-row type="flex" align="bottom" style="margin-bottom: 4px">
                  <span
                    v-if="item.isCertificate"
                    style="
                      border: 1px solid #fe815a;
                      border-radius: 4px;
                      color: #fe815a;
                      padding: 2px;
                      font-size: 10px;
                    "
                  >
                    已认证
                  </span>
                  <span
                    :style="item.isCertificate ? 'margin-left: 5px' : null"
                    style="
                      border: 1px solid #fe815a;
                      border-radius: 4px;
                      color: #fe815a;
                      padding: 2px;
                      font-size: 10px;
                    "
                  >
                    二手
                  </span>
                  <span
                    style="color: red; margin-left: 5px"
                    :style="
                      item.price == 0 || item.price == null
                        ? 'font-size:12px;'
                        : ''
                    "
                    >￥{{
                      item.price == 0 || item.price == null
                        ? '面议'
                        : item.price
                    }}</span
                  >
                </van-row>
                <van-row
                  type="flex"
                  align="center"
                  justify="space-between"
                  style="height: 16px; margin-left: 1px"
                >
                  <van-col style="display: flex; align-items: center">
                    <van-icon name="location-o" color="rgb(150, 151, 153)" />
                    <span
                      class="cell-span"
                      style="
                        margin-left: 3px;
                        display: inline-block;
                        width: 2.6rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      "
                      >{{
                        getAddressByDistrictCode(item.areaCode) || '地区未知'
                      }}</span
                    >
                  </van-col>
                  <van-col style="font-size: 12px">
                    <div style="height: 100%">
                      <span
                        class="cell-span"
                        style="float: left; line-height: 12px"
                      >
                        <van-icon
                          name="star"
                          color="#EE3F00"
                          style="float: left; font-size: 12px"
                          v-show="
                            item.newLevel >= 0 && item.newLevel < 3
                              ? true
                              : false
                          "
                        ></van-icon>
                        &#8197;{{ getChosedLevel(item.newLevel) }}
                      </span>
                    </div>
                  </van-col>
                  <van-col>
                    <span class="cell-span">{{
                      item.updateTime.substring(0, 10)
                    }}</span>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-row
            class="addr"
            style="height: 40px; line-height: 33px; display: flex"
          >
            <div
              class="addrDetail"
              style="border-right: 1px solid #e8e8e8"
              @click="call(item)"
            >
              <img :src="mendianTel" class="mendianTel" />
              <div class="mendianlbel">电话联系</div>
            </div>
            <div class="addrDetail" v-if="item.shopId == null"></div>
            <div
              class="addrDetail"
              @click="itemShopClick(item)"
              v-if="item.shopId != null"
            >
              <img :src="mendian" class="mendianTel" />
              <div class="mendianlbel">进入门店</div>
            </div>
          </van-row>
        </div>
      </van-list>
    </div>
    <div style="">
      <div
        style="
          width: 100%;
          text-align: center;
          font-size: 18px;
          font-weight: 600;
        "
      >
        更多推荐
      </div>
      <div style="width: 90%; margin: auto; padding-top: 10px">
        <img :src="ksih" alt="" style="width: 100%" />
      </div>
      <van-list
        v-model="loading"
        :finished="finishedMore"
        finished-text="没有更多了"
        @load="onLoadMore"
      >
        <div
          v-for="(item, index) in morelist"
          :key="index"
          :title="item"
          style="background-color: white; margin-top: 15px"
        >
          <van-row
            style="padding-top: 15px; background-color: white"
            @click="itemClick(item.id, item.renStauts)"
          >
            <van-col style="position: relative; background-color: white">
              <img
                :src="getSrc(item, index)"
                style="object-fit: cover"
                width="100px"
                height="100px"
              />
              <img
                v-if="item.finished"
                :src="item.sellOut == true ? sellOutPng : finishPng"
                style="
                  position: absolute;
                  z-index: 1;
                  width: 100%;
                  left: 50%;
                  top: 50%;
                  margin: auto;
                  transform: translate(-50%, -50%);
                "
              />
            </van-col>
            <van-col
              style="
                width: calc(100% - 100px);
                height: 100px;
                padding-left: 10px;
                display: flex;
                flex-direction: column;
                position: relative;
              "
            >
              <div style="flex: 1; display: flex">
                <p
                  style="
                    display: inline-block;
                    display: flex;
                    color: white;
                    width: auto;
                    height: 20px;
                    padding: 2px 3px;
                    font-size: 12px;
                    align-items: center;
                    text-align: center;
                    border-radius: 4px;
                    margin-top: 5px;
                  "
                  :style="{
                    background:
                      item.userType == '平台'
                        ? '#86d1a4'
                        : item.userType == '门店'
                        ? '#809de1'
                        : item.userType == '个人'
                        ? '#f4a97c'
                        : null,
                  }"
                >
                  {{ item.userType == undefined ? '待审' : item.userType }}
                </p>
                <van-cell
                  style="margin-left: 10px"
                  :title="item.title"
                  label-class="item"
                  title-class="title"
                  :label="item.detail"
                ></van-cell>
              </div>
              <div style="width: 100%">
                <van-row type="flex" align="bottom" style="margin-bottom: 4px">
                  <span
                    v-if="item.isCertificate"
                    style="
                      border: 1px solid #fe815a;
                      border-radius: 4px;
                      color: #fe815a;
                      padding: 2px;
                      font-size: 10px;
                    "
                  >
                    已认证
                  </span>
                  <span
                    :style="item.isCertificate ? 'margin-left: 5px' : null"
                    style="
                      border: 1px solid #fe815a;
                      border-radius: 4px;
                      color: #fe815a;
                      padding: 2px;
                      font-size: 10px;
                    "
                  >
                    二手
                  </span>
                  <span
                    style="color: red; margin-left: 5px"
                    :style="
                      item.price == 0 || item.price == null
                        ? 'font-size:12px;'
                        : ''
                    "
                    >￥{{
                      item.price == 0 || item.price == null
                        ? '面议'
                        : item.price
                    }}</span
                  >
                </van-row>
                <van-row
                  type="flex"
                  align="center"
                  justify="space-between"
                  style="height: 16px; margin-left: 1px"
                >
                  <van-col style="display: flex; align-items: center">
                    <van-icon name="location-o" color="rgb(150, 151, 153)" />
                    <span
                      class="cell-span"
                      style="
                        margin-left: 3px;
                        display: inline-block;
                        width: 2.6rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      "
                      >{{
                        getAddressByDistrictCode(item.areaCode) || '地区未知'
                      }}</span
                    >
                  </van-col>
                  <van-col style="font-size: 12px">
                    <div style="height: 100%">
                      <span
                        class="cell-span"
                        style="float: left; line-height: 12px"
                      >
                        <van-icon
                          name="star"
                          color="#EE3F00"
                          style="float: left; font-size: 12px"
                          v-show="
                            item.newLevel >= 0 && item.newLevel < 3
                              ? true
                              : false
                          "
                        ></van-icon>
                        &#8197;{{ getChosedLevel(item.newLevel) }}
                      </span>
                    </div>
                  </van-col>
                  <van-col>
                    <span class="cell-span">{{
                      item.updateTime.substring(0, 10)
                    }}</span>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-row
            class="addr"
            style="height: 40px; line-height: 33px; display: flex"
          >
            <div
              class="addrDetail"
              style="border-right: 1px solid #e8e8e8"
              @click="call(item)"
            >
              <img :src="mendianTel" class="mendianTel" />
              <div class="mendianlbel">电话联系</div>
            </div>
            <div class="addrDetail" v-if="item.shopId == null"></div>
            <div
              class="addrDetail"
              @click="itemShopClick(item)"
              v-if="item.shopId != null"
            >
              <img :src="mendian" class="mendianTel" />
              <div class="mendianlbel">进入门店</div>
            </div>
          </van-row>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import {
  Search,
  Row,
  Col,
  DropdownMenu,
  DropdownItem,
  List,
  Uploader,
  Popup,
  Area,
  Divider,
  Toast,
  Dialog,
} from 'vant';
import {
  listUsed,
  updateUsedStatus,
  deleteUsedRecord,
  isAllowedShowTel,
  tishiP,
  dicItems,
  morelistUsed,
  adList,
  authInfo,
  getOrderSign,
} from '@/api/api';
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
import areaList from '@/views/user/module-address-edit/area_all.json';
import logo_default from '@/assets/images/logo.jpg';
import snhand from '@/assets/images/snhand.png';
import usmore from '@/assets/images/usmore.jpg';
import logo_certificate from '@/assets/images/certificate.png';
import scrollFixed from '@/mixin/scroll-fixed';
import sellOutPng from '@/assets/images/sell_out.png';
import newlogo from '@/assets/images/newlogo.png';
import finishPng from '@/assets/images/finish.png';
import mendianTel from '@/assets/images/info/mendianTel.png';
import mendian from '@/assets/images/info/mendian.png';

export default {
  mixins: [scrollFixed],
  data() {
    return {
      snhand,
      setou: new Map(),
      areaList: areaList,
      newlogo,
      usmore,
      ksih: '',
      morepage: 0,
      userId: -1,
      address: '地区选择',
      list: [],
      morelist: [],
      loading: false,
      finished: false,
      finishedMore: false,
      logo_default: logo_default,
      logo_certificate: logo_certificate,
      page: 0,
      limit: 5,
      sale: false,
      isOut: false,
      filter_name: '',
      area_code: '',
      in_class: -1,
      chosed_level: -1,
      classoptions: [],
      leveloptions: [],
      status: ['已下架', '待审核', '审核不通过', '已上线'],
      classId: 'USED.PUBLISH.CLASS',
      newLevelId: 'USED.PUBLISH.NEW.LEVEL',
      finishPng,
      sellOutPng,
      mendian,
      mendianTel,
      luay: false,
      bei: [
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/a8b9myfv9aaff9vdi8ey.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/mqes4omo1web8pbr9kfg.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/gsxkzucq38dye53ktj02.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/nw6bfr5f2j0eg1frveko.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/1fsyv5k37nl0sh5t3c07.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/2ebsg1lfh8hoc0pht53w.jpg',
      ],
      tiw: '',
      mobile: '',
      avter: '',
      memberLevel: '',
      calpon: '',
      positionName: '',
    };
  },

  created() {
    this.initArea();
    this.initClassOption();
    this.initNewLevelOption();
    adList({ position: 4 }).then((res) => {
      this.ksih = res.data.data.list[0].url;
    });
    dicItems({
      groupId: 'RENT_USER_TYPE',
    }).then((res) => {
      res.data.data.list.forEach((e) => {
        this.setou.set(e.itemValue, e.itemName);
      });
    });
    tishiP({ code: 'litemall_secondhand_title' }).then((res) => {
      this.tiw = res.data.data.litemall_secondhand_title;
    });
    authInfo().then((res) => {
      this.userId = res.data.data.userId;
      this.mobile = res.data.data.mobile;
      this.statu = res.data.data.status;

      this.positionName = res.data.data.positionName;
      this.memberLevel = res.data.data.memberLevel;
      this.avter = res.data.data.avatar;
      this.userLevel = res.data.data.userLevel;
      if (this.userLevel < 2) {
        if (this.memberLevel == 1) {
          this.positionName = '金牌会员';
        } else if (this.memberLevel == 2) {
          this.positionName = '普通会员';
        } else if (this.memberLevel == 0 && this.userLevel == 0) {
          this.positionName = '新用户';
        }
      }
    });
  },

  methods: {
    toFa(id) {
      if (id == 2) {
        this.$router.push('/info/used-publish/-1');
      } else if (id == 1) {
        this.$router.push('/info/rent-publish/-1');
      }
    },
    filname() {
      this.list = [];
      this.morelist = [];
      let ipt = this.$refs.inpt;
      ipt.blur();
      this.onLoad();
      this.onLoadMore();
    },
    lualy() {
      this.luay = false;
    },

    initArea() {
      let area = this.$store.getters.getArea;
      if (area.code != null) {
        this.area_code = area.code;
        this.address = area.city;
      } else {
        this.area_code = '100000';
        this.address = '全国地区';
      }
    },
    getChosedLevel(level_value) {
      for (let i in this.leveloptions) {
        if (level_value == this.leveloptions[i].value) {
          if (level_value == -1) {
            return '新旧程度';
          } else {
            return this.leveloptions[i].text;
          }
        }
      }
    },
    initClassOption() {
      dicItems({
        groupId: this.classId,
      })
        .then((res) => {
          let list = res.data.data.list;
          let opiton;
          for (let i in list) {
            opiton = {};

            opiton['text'] = list[i].itemName;

            opiton['value'] = parseInt(list[i].itemValue);
            this.classoptions.push(opiton);
          }
        })
        .catch(() => {});
    },
    initNewLevelOption() {
      dicItems({
        groupId: this.newLevelId,
      })
        .then((res) => {
          let list = res.data.data.list;
          let opiton;
          for (let i in list) {
            opiton = {};
            opiton['text'] = list[i].itemName;
            opiton['value'] = parseInt(list[i].itemValue);
            this.leveloptions.push(opiton);
          }
        })
        .catch(() => {});
    },
    publish(link) {
      if (this.mobile == undefined || this.mobile == '') {
        //未认证
        Toast('请先验证手机号!');
        this.$router.push(`/check`);
        return;
      } else {
        this.$router.push('/info/used-publish/-1');
      }
    },
    itemClick(id, it) {
      if (it == 1) {
        this.$router.push(`/info/used-detail/${id}`);
        return;
      } else if (it == 2) {
        this.$router.push(`/info/rent-detail/${id}`);
        return;
      }
    },
    getSrc(item, id) {
      let image = this.usmore;
      if (item.images.length != 0) {
        image = item.images[0];
      }
      return image;
    },
    addConfirm(e) {
      if (e[0].code == '100000') {
        this.area_code = '';
        this.address = '全国地区';
      } else {
        this.area_code = e[1].code;
        this.address = e[1].name;
      }
      this.list = [];
      this.morelist = [];
      this.morepage = 0;
      this.page = 0;
      this.show = false;
      this.onLoad();
      this.onLoadMore();
      this.$refs.area_item.toggle();
    },
    hideAreaItem() {
      this.$refs.area_item.toggle();
    },
    changeItem(value) {
      this.in_class = value;
      this.morepage = 0;
      this.page = 0;
      this.list = [];
      this.morelist = [];
      this.onLoad();
      this.onLoadMore();
    },

    itemShopClick(row) {
      this.$router.push(`/shop/detail?id=` + row.shopId + '&zuid=1');
    },
    getAddressByDistrictCode(district_code) {
      let province_code = district_code.substring(0, 2) + '0000';
      let city_code = district_code.substring(0, 4) + '00';
      let province_name = areaList.province_list[province_code];
      let city_name = areaList.city_list[city_code];
      let district_name = areaList.county_list[district_code];
      return city_name;
    },
    onLoad() {
      if (this.page != 0 && this.list.length < 10) {
        this.page = 0;
        this.list = [];
      }

      this.page++;
      this.limit++;
      listUsed({
        page: this.page,
        limit: 800,
        filtername: this.filter_name,
        areaCode: this.area_code,
        inClass: this.in_class,
        newLevel: this.chosed_level,
      })
        .then((res) => {
          res.data.data.list.forEach((item) => {
            if (this.setou.get(String(item.userType))) {
              item.userType = this.setou.get(String(item.userType));
            }
            item.sellOut = false;
            if (item.isCertificate) {
              item.finished = false;
            } else {
              if (typeof item.excessTime == 'undefined') {
                item.finished = true;
              } else if (new Date() > new Date(item.excessTime)) {
                item.finished = true;
              } else {
                item.finished = false;
              }
            }

            if (item.status !== 3) {
              //如果商品已经下架，则显示结束
              item.finished = true;
              if (item.isCertificate) {
                item.sellOut = true;
              }
            }
            // console.log(
            //   item.title,
            //   '认证：' + item.isCertificate,
            //   '结束：' + item.finished,
            //   '售出：' + item.sellOut
            // );
          });
          this.list.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },
    call(row) {
      if (this.mobile == undefined || this.mobile == '') {
        //未认证
        Toast('请先验证手机号!');
        this.$router.push(`/check`);
        return;
      }
      isAllowedShowTel({
        projectId: Number(row.id),
      }).then((res) => {
        let isAllowed = res.data.data;
        if (isAllowed) {
          this.calpon = true;
          Toast('验证通过，再点一次可拨打');
        } else {
          this.calpon = false;
          Dialog.confirm({
            title: '系统提示',
            message:
              '每天一次免费查看信息动态 \n是否购买"涂装行业信息动态"月卡会员',
            confirmButtonText: '是',
            cancelButtonText: '否',
          })
            .then(() => {
              this.pay(2);
            })
            .catch(() => {
              // on cancel
            });
        }
      });

      if (this.calpon) {
        window.location.href = 'tel:' + row.tel;
      }
    },
    pay(type) {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            onBridgeReady1,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady1);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady1);
        }
      } else {
        this.onBridgeReady1();
      }
    },
    onBridgeReady1() {
      getOrderSign({
        orderId: 1181174,
      }).then((res) => {
        let that = this;

        that.orderSn = res.data.data.orderSn;

        const Mfbank = JSON.parse(res.data.data.info.wcPayData);

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              //跳转到开通会员接口
              setTenCardOnline({
                orderSn: that.orderSn,
                goodId: 1181174,
              }).then((res) => {
                let status = 0;
                if (res.data.errmsg == '成功') {
                  status = 1;
                }
                that.$router.push({
                  name: 'paymentVipStatus',
                  query: {
                    status: status,
                  },
                });
              });
            }
          }
        );
      });
    },
    onLoadMore() {
      if (this.morepage != 0 && this.morelist.length < 10) {
        this.morepage = 0;
        this.morelist = [];
      }
      this.morepage++;
      morelistUsed({
        page: this.morepage,
        limit: 10,
        inClass: this.in_class,
        areaCode: this.area_code,
        filtername: this.filter_name,
      }).then((res) => {
        res.data.data.list.forEach((item) => {
          if (this.setou.get(String(item.userType))) {
            item.userType = this.setou.get(String(item.userType));
          }
          item.sellOut = false;
          if (item.isCertificate) {
            item.finished = false;
          } else {
            if (typeof item.excessTime == 'undefined') {
              item.finished = true;
            } else if (new Date() > new Date(item.excessTime)) {
              item.finished = true;
            } else {
              item.finished = false;
            }
          }

          if (item.status !== 3) {
            //如果商品已经下架，则显示结束
            item.finished = true;
            if (item.isCertificate) {
              item.sellOut = true;
            }
          }
          this.morelist.push(item);
        });
        // this.morelist = res.data.data.list;
        this.loading = false;
        this.finishedMore = res.data.data.page >= res.data.data.pages;
      });
    },
  },
  components: {
    [Dialog.name]: Dialog,
    [Search.name]: Search,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Divider.name]: Divider,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
  },
};
</script>

<style lang="scss" scoped>
.van-search,
.van-search__content {
  background: #fff !important;
  width: 100%;
  padding: 10px 10px;
}
// /deep/.van-icon::before {
//   position: absolute;
// }
.van-search .van-cell {
  border: 1px solid #1d5ae8;
  margin-left: 10px;
  margin-top: 10px;
  border-radius: 0.5px;
  border-radius: 3px;
}
.van-cell::after {
  border: none !important;
}
.van-search {
  padding: 0.75rem 4%;
}

.van-search .van-cell {
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0 10px;
  padding-top: 0.26rem;
  padding-bottom: 0.1rem;
  background: #ffffff;
}
/deep/ .van-field__body {
  padding-right: 8px !important;
}
/deep/.van-cell {
  margin-top: 2px;
  width: 80%;
}
.menu-container {
  display: flex;

  padding-bottom: 10px !important;
  min-height: 40px;
  .van-col {
    flex: 1 !important;
    // padding: 0 5px;
  }
}

/deep/.van-dropdown-menu__bar {
  height: auto;
  border-radius: 25px;
  background: #ffae4e;
  box-shadow: 0 0 0 0 !important;
  .van-dropdown-menu__title::after {
    border-color: transparent transparent #fff #fff;
  }
}

/deep/.van-dropdown-menu__item {
  padding: 0 9% 0 0;
  border-radius: 25px !important;

  color: #fff !important;
}

/deep/ .van-dropdown-menu {
  background: none;
  box-shadow: 0 0 0;
}

/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm {
  color: #ee3f00;
}

.van-search__content--round {
  border-radius: 0px !important;
}

.van-search__content {
  background: rgba(0, 0, 0, 0);
  padding-left: 0 !important;
}

/deep/ .van-dropdown-menu {
  box-shadow: 0 0 0 0;

  .van-dropdown-menu__item {
    // margin-left: 6px;
    height: 29px;
  }
}

/deep/ .van-dropdown-menu__title {
  color: #fff !important;
}

.corner-span {
  width: 40px;
  height: 20px;
  // background-color: #EE3F00;
  border: 1px solid #ee3f00;
  border-radius: 5px;
  font-size: 12px;
  padding: 2px 8px;
}

.spanafter {
  position: relative;
  padding: 0 8px;
  line-height: 18px;
}

.spanafter::after {
  position: absolute;
  top: 50%;
  right: -4px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent currentColor currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: '';
}
.is-active {
  color: white;
  background-color: #0397fb;
}

.address {
  text-align: center;
  height: 36px;
  line-height: 36px;
  color: #323233;
  font-size: 15px;
}
.navclas {
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  padding-top: 12px;
  box-sizing: border-box;
  > a {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /deep/ .van-dropdown-menu__title {
    color: black !important;
  }
  /deep/ .van-dropdown-menu__title::after {
    border-color: transparent transparent black black !important;
  }
  /deep/.van-dropdown-menu__bar {
    background-color: #2aa7ea00 !important;
  }
}
.container {
  .van-row {
    padding: 0px 15px;

    .van-row {
      padding: 0px;
    }
  }
}

.van-divider {
  margin: 0px;
  padding-top: 15px;
}

.van-search {
  padding: 0px;
  height: 24px !important;
}

.title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: -4px;
}

.publish {
  line-height: 40px;
  text-align: end;
}

.publish span {
  width: 60px;
  height: 30px;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 14px;
  padding: 5px 7px;
  color: white;
}

.van-cell {
  padding: 0px;
}

.cell-span {
  color: #969799;
  font-size: 12px;
}
.addr {
  margin-top: 10px;
}
.addrDetail {
  width: 100%;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mendianTel {
  height: 60%;
}
.mendianlbel {
  width: 40%;
  text-align: center;
}
.tishi {
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  .ticonent {
    width: 90%;
    height: 90%;
  }
}
</style>
